<template>
  <div>
    <n-card>
      <div
        style="
          margin-bottom: 10px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          gap: 10px;
        "
      >
        <n-input
          placeholder="搜索描述"
          style="width: 200px"
          size="small"
          v-model:value="desc"
        >
          <template #prefix>
            <n-icon :component="SearchOutline" />
          </template>
        </n-input>
        <n-button
          :loading="btnLoading"
          type="success"
          @click="handleClick"
          size="small"
        >
          <template #icon>
            <n-icon size="small">
              <SearchOutline />
            </n-icon>
          </template>
          查询
        </n-button>
      </div>
      <!-- <n-skeleton text :repeat="6" /> -->
      <n-spin :show="loading">
        <n-data-table
          :columns="columns"
          :data="dataComment"
          :row-key="rowKey"
          default-expand-all
          style="margin-bottom: 10px; width: 100%"
          :max-height="tableHeight"
          :scroll-x="1500"
        />

        <div style="display: flex; justify-content: flex-end">
          <n-pagination
            v-model:page="page"
            v-model:page-size="pageSize"
            :page-count="total"
            :on-update:page="updatePage"
            :on-update:page-size="updatePageSize"
            show-size-picker
            :page-sizes="[10, 20, 30, 40]"
          />
        </div>
      </n-spin>
    </n-card>
  </div>
</template>

<script setup>
import { ref, h, inject, onMounted } from "vue";
import { SearchOutline } from "@vicons/ionicons5";
import { NTag, NButton, NPopconfirm, NPopover, NAvatar } from "naive-ui";
import { getCommentListByAdmin } from "@/api/loveDiary.ts";
import myA from "@/components/polarisA.vue";

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);
const btnLoading = ref(false);
const dataComment = ref();
const columns = ref([
   {
    type: "selection",
    fixed: 'left' 
  },
  {
    title: "头像",
    key: "c_head",
    width: 70,
    render(row) {
      return h(NAvatar, {
        src: "/src/assets/img/head.jpg",
        round: true,
      });
    },
  },
  {
    title: "昵称",
    key: "c_uName",
    width: 100,
  },
  {
    title: "邮箱",
    key: "c_email",
  },
  {
    title: "网址",
    key: "c_website",
    render(row) {
      if (row.c_website != null && row.c_website != "") {
        return [
          h(
            myA,
            {
              label: row.c_website,
              isOmit: true,
            },
            row.c_website
          ),
        ];
      }
    },
  },
  {
    title: "回复人",
    key: "c_recover",
  },
  {
    title: "所属",
    key: "c_article",
  },
  {
    title: "内容",
    key: "c_content",
  },
  {
    title: "评论时间",
    key: "c_createTime",
    width: 180,
  },
  {
    title: "地址信息",
    key: "c_position",
  },
  {
    title: "操作",
    key: "actions",
    fixed: "right",
    render(row) {
      return [
        h(
          NPopconfirm,
          {
            positiveButtonProps: {
              size: "tiny",
            },
            negativeButtonProps: {
              size: "tiny",
            },
            onPositiveClick: (e) => {
              window.$message.success("我被点击了！");
            },
          },
          {
            trigger: () => {
              return h(
                NButton,
                {
                  style: { marginRight: "10px" },
                  strong: true,
                  secondary: true,
                  type: "error",
                  size: "small",
                },
                { default: () => "删除" }
              );
            },
            default: () => {
              return "确定要删除？";
            },
          }
        ),
        h(
          NButton,
          {
            strong: true,
            secondary: true,
            type: "warning",
            size: "small",
            onClick: () => updateImage(row),
          },
          { default: () => "编辑" }
        ),
      ];
    },
    width: 150,
  },
]);

const rowKey = (row) => row.i_id;
const tableHeight = ref(inject("tableHeight"));
const desc = ref(null);
const isAnonymous = ref(null);
const userName = ref(null);
const commentContent = ref(null);

onMounted(() => {
  getComment();
});
const getComment = () => {
  loading.value = true;
  getCommentListByAdmin({
    page: page.value,
    pageSize: pageSize.value,
    isAnonymous: isAnonymous.value,
    type: 2,
    name: userName.value,
    content: commentContent.value,
  })
    .then((res) => {
      if (res.code == 200) {
        dataComment.value = [];
        dataComment.value = res.data.data;
        console.log(dataComment.value);
        total.value = parseInt(res.data.total / pageSize.value) + 1;
      } else {
        window.$message.error(res.message);
      }
      loading.value = false;
      btnLoading.value = false;
    })
    .catch((err) => {
      loading.value = false;
    });
};

const updatePageSize = (ps) => {
  pageSize.value = ps;
  getComment();
};
const updatePage = (p) => {
  page.value = p;
  getComment();
};
</script>
